<template>
  <div class="card bg-white px-3 mt-3">
    <div class="card-header mb-3">
      <div class="card-title d-flex ai-center py-3">
        <i :class="`sprite sprite-${icon}`"></i>
        <h3 class="ml-2 flex-1">{{title}}</h3>
        <i class="sprite sprite-more" v-if="!plain"></i>
      </div>
      <router-link :to="image.url" tag="img" :src="image.img" v-if="image&&image.url" class="w-100 mb-3"/>
    </div>
    <div class="card-body">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: { type: String, required: true },
    icon: { type: String, required: true },
    plain: { type: Boolean },
    image: { type: Object }
  }
}
</script>

<style lang="less" scope>
.sprite-more {
  width: 1.384615rem;
  height: .230769rem;
  background-position: 47.619% 56.305%;
}
.card {
  border-bottom: 1px solid #d4d9de;
  .card-header {
    position: relative;
    &::after {
      content: '';
      display: block;
      width: 100%;
      height: 1px;
      transform: scaleY(.5);
      background: #d4d9de;
      position: absolute;
      bottom: 0;
      left: 0;
    }
  }
}
</style>
